function baicaijia() {
    let main = document.getElementById("main")
    let nav = document.getElementById("nav")
        // 初始化pageId
    let num = 0
        // 渲染导航栏
    function renderNav(navData) {
        let html = ""
        navData.forEach(item => {
            html += `
        <a>${item.title}</a>
        `
        })
        nav.innerHTML = html
    }
    // 渲染白菜价页面
    let html = ""

    function renderHtml(pageData) {
        pageData.forEach(item => {
            html += `
        <div>
            <div>
                ${item.productImg}
            </div>
            <div>
                ${item.productName}
                <span>${item.productPrice}</span>
                <div id="parent">
                <div id="child"> </div>
                </div>
                <span id="couponText">还剩120张</span>
                <div id="link">
                    <a href="">${item.productCoupon}</a>
                    <a href="">下单链接</a>
                </div>
            </div>
        </div>
        `
        });
        main.innerHTML = html
        let childs = document.querySelectorAll("#child")

        function Slider() {
            let num = 0
            let timer = setInterval(function() {
                for (var i = 0; i < childs.length; i++) {
                    if (num <= 120) {
                        num += 1
                        childs[i].style.width = num + "%"
                    } else {
                        clearInterval(timer)
                    }
                }

            }, 20)
        }
        Slider()
    }

    function pageAjax(num) {
        ajax({
            url: "http://chst.vip:1234/api/getbaicaijiaproduct?titleid=" + num + "",
            success(res) {
                console.log(res.result);
                let pageData = res.result.splice(0, 4);
                renderHtml(pageData)
                let count = 2;
                console.log(count);

                main.onscroll = function() {

                    //获取关键的三个指标
                    // let clientHeight = document.documentElement.clientHeight;
                    let clientHeight = main.clientHeight;
                    console.log(clientHeight);
                    // let scrollHeight = document.documentElement.scrollHeight;
                    let scrollHeight = main.scrollHeight;
                    console.log(scrollHeight);
                    // let scrollTop = document.documentElement.scrollTop;
                    let scrollTop = main.scrollTop;
                    console.log(scrollTop);
                    //计算阈值
                    let threshold = scrollHeight - (scrollTop + clientHeight);

                    if (threshold <= 10) { //如果滚动条快接到达底部了
                        // console.log(threshold)
                        count += 2 //让count++
                            // console.log(count);
                        pageData = res.result.splice(0, count);
                        //再去请求返回的数组中截取内容
                        // console.log(currentArr);
                        if (count >= 14) { //如果截取的内容超出了后台返回数据的数量
                            return //啥也不做
                        }
                        renderHtml(pageData)

                    }
                    top0.onclick  =   function()  {

                        //加入动画过度效果
                        //         document.querySelector('#recommen').scrollTop = 0
                        // let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                        let timer = setInterval(() => {
                            main.scrollTop -= 20
                            if (main.scrollTop <= 0) {
                                clearInterval(timer)
                            }
                        }, 10)


                            
                    }
                }

            }

        })
    }
    pageAjax(num)
        // 请求导航栏数据
    ajax({
            url: "http://chst.vip:1234/api/getbaicaijiatitle?key=all",
            success(res) {
                let navData = res.result;
                renderNav(navData)
                let navArr = nav.children
                console.log(navArr);

                function pt() {
                    for (let i = 0; i < navArr.length; i++) {

                        navArr[i].style.color = "black"
                    }
                }

                for (let i = 0; i < navArr.length; i++) {

                    navArr[i].onclick = function() {
                        pt()
                        navArr[i].style.color = "red"
                        console.log(navArr[i]);

                        let num = navData[i].titleId
                        pageAjax(num)
                    }
                }
            }
        })
        // 返回顶部按钮功能实现
        //     document.querySelector('#main').onscroll = function() {
        //         top0.onclick = function() {
        //             document.querySelector('#main').scrollTop = 0
        //         }
        //     }
}
baicaijia()